<template>
	<view class="shop-integral-list" v-if="detail.id">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
			:backgroundColor="color == '#ffffff' ?``:primaryColor" leftIcon="icon-left" title="积分商城">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>	
		<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>	
		<view class="pt-md pl-lg pr-lg pb-lg flex-center">
			<image mode="aspectFill" lazy-load class="user-img radius" :src="userInfo.avatarUrl"
				v-if="userInfo.avatarUrl">
			</image>
			<image mode="aspectFill" lazy-load class="avatar radius" src="/static/image/mine/default-user.png" v-else>
			</image>
			<view class="flex-1 flex-center ml-md c-base">
				<view class="flex-1">
					<view class="f-lg-title text-bold max-350 ellipsis">
						Hi，{{ userInfo.nickName || `用户${userInfo.id}` }}
					</view>
					<view class="f-caption">每日签到可获得{{detail.signin_integral}}积分</view>
				</view>
				<view @tap="$util.goUrl({url:`/shop/pages/integral/record`})" class="flex-center flex-column">
					<image lazy-load class="integral-img" src="/static/image/shop/integral.png"></image>
					<view class="flex-y-baseline f-icontext mb-sm">
						<view class="f-paragraph">{{detail.integral}}</view>积分
					</view>
					<view class="exchange-btn flex-center f-icontext radius" :style="{background:primaryColor}">兑换记录
					</view>
				</view>
			</view>
		</view>
		<view class="pd-lg" style="border-radius: 40rpx;">
			<search @input="toSearch" type="input" :padding="0" :radius="70" placeholder="搜索商品名称"></search>
		</view>
		<view class="mt-md mt-md ml-md pb-md fill-base radius-16" style="width:710rpx;overflow: hidden;">
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
				width="50%" height="100rpx" color="#C5C5C5" fontSize="32rpx"></tab>
		</view>
		<block v-for="(item,index) in list.data" :key="index">
			<view @tap.stop="goDetail(index)" class="goods-item mt-md ml-md mr-md fill-base radius-16">
				<view class="flex-center pd-lg">
					<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
					<view class="flex-1 ml-lg">
						<view class="flex-1">
							<view class="f-title c-title text-bold mt-sm mb-sm ellipsis">{{item.goods_name}}
							</view>
							<view class="flex-y-baseline f-title c-warning mb-sm">
								{{item.price*1>0?`${item.integral}积分 + ${item.price}元`:`${item.integral}积分`}}
							</view>
							<view class="f-caption c-caption text-delete">¥{{item.init_price}}</view>
						</view>
					</view>
				</view>
				<view class="ml-lg mr-lg b-1px-b"></view>
				<view class="flex-between pd-lg">
					<view class="f-caption c-caption">已换购 {{item.all_have_stock}}</view>
					<view class="common-btn flex-center f-paragraph c-base radius" :style="{background:primaryColor}">
						立即兑换</view>
				</view>
			</view>
		</block>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '#ffffff',
				activeIndex: 0,
				tabList: [{
					id: 1,
					title: '会员积分商品'
				}, {
					id: 2,
					title: '非会员积分商品',
					number: 0
				}],
				detail: {},
				param: {
					page: 1,
				},
				list: {
					data: []
				},
				loading: true,
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
		}),
		onLoad() {
			this.$util.showLoading()
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return
			this.param.page = this.param.page + 1
			this.loading = true
			this.getList()
		},
		onPageScroll(e) {
			let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
			if (this.color == color) return
			this.color = color
			this.$util.setNavigationBarColor({
				color,
				bg: 'none'
			});
		},
		methods: {
			...mapActions(['getUserInfo', 'getAuthUserProfile']),
			async initIndex() {
				let [detail] = await Promise.all([this.$api.shop.userInfo(), this
					.getList()
				])
				detail.id = 1
				this.detail = detail
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex()
			},
			handerTabChange(index) {
				this.activeIndex = index
				this.$util.showLoading()
				this.param.page = 1
				this.list.data = []
				this.getList()
			},
			toSearch(val) {
				this.loading = true
				this.param.page = 1
				this.param.goods_name = val
				this.getList()
			},
			async getList() {
				let {
					list: oldList,
					param,
					tabList,
					activeIndex
				} = this
				param.type = tabList[activeIndex].id
				let newList = await this.$api.shop.integralGoodsList(param);
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			goDetail(index) {
				let {
					goods_id: id
				} = this.list.data[index]
				this.$util.goUrl({
					url: `/shop/pages/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.shop-integral-list {

		.user-img {
			width: 120rpx;
			height: 120rpx;
			line-height: 1rpx;
			overflow: hidden;
			border: 4rpx solid #EFF3FD;
			transform: rotateZ(360deg);
		}

		.integral-img {
			width: 42rpx;
			height: 42rpx;
		}

		.exchange-btn {
			width: 132rpx;
			height: 32rpx;
		}

		.mine-index-bg {
			background: rgb(57, 181, 74);
			height: 14.425rem;
			width: 140%;
			left: -20%;
			top: 0;
			z-index: -1;
		}
		
		.goods-item {
			.cover {
				width: 180rpx;
				height: 170rpx;
			}

			.ellipsis {
				max-width: 440rpx;
			}
		}

	}
</style>
